<template>
	<view class="course" :class="{ rotate: rotate }">
		<view class="course-wrap">
			<view class="header">
				<!-- <text>{{ scheduleConfig.name }}</text> -->
				<view class="colhead-selector" v-if="timeRange.start && timeRange.end">
					<text class="cuIcon-back" @click="changeSchedule('prev')"></text>
					<text class="current-select"
						@click="selectCol">{{ getTimeExplain(timeRange.start, timeRange.end) }}</text>
					<text class="cuIcon-right" @click="changeSchedule('next')"></text>
				</view>
			</view>
			<view class="course" v-if="colHeadList.length > 0">
				<view class="time-area" :style="{ width: rowLabelWidth + 'rpx' }">
					<view class="week">
						<view class="week-item" v-if="colHeadList.length > 0"></view>
					</view>
					<view class="time-item" v-for="(item, index) in rowHeadList" :key="index"
						:class="{ 'bg-blue': scheduleConfig.row_head_key_col === 'user_no' && login_user_info.user_no === item[scheduleConfig.row_head_key_col] }">
						<view class="time" v-if="item[scheduleConfig.row_head_disp_col]">
							{{ item[scheduleConfig.row_head_disp_col] }}</view>
					</view>
				</view>
				<view class="course-area" v-if="colHeadList.length > 0">
					<view class="week">
						<view class="week-item" v-for="(item, index) in colHeadList" :key="item.id">
							{{ item && item[scheduleConfig.col_head_disp_col] ? item[scheduleConfig.col_head_disp_col] : '' }}
						</view>
					</view>
					<view class="course-row" v-for="(row, rowIndex) in rowHeadList" :key="rowIndex">
						<grid-item class="course-row-item" v-for="(col, colIndex) in row.newRowDataList" :key="colIndex"
							@click.native="clickRow(col, row, colIndex, rowIndex)" :rowData="col"
							:colData="row.rowDataListCol"></grid-item>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="{ show: showModal }" @click.stop.prevent="showModal = false"
			@touchmove.stop.prevent="clear">
			<view class="cu-dialog">
				<view class="modal-list">
					<view class="modal-title" v-if="itemData && itemData.row">
						<text class="row-head"
							:class="{ 'text-blue': scheduleConfig.row_head_key_col === 'user_no' && login_user_info.user_no === itemData['row'][scheduleConfig.row_head_key_col] }">
							{{ itemData['row'][scheduleConfig['row_head_disp_col']] }}
						</text>
						<text
							class="col-head">周{{ colHeadList[itemData['colIndex']][scheduleConfig['col_head_disp_col']] }}</text>
					</view>
					<view class="page-item" v-for="(item, index) in modalList" :key="index">
						<view class="item-title">
							<view class="left">{{ item.group }} ({{ item.data.length }}):</view>
							<text class="btn bg-blue" @click="goPage(item)">进入</text>
						</view>
						<view class="item-content">
							<view class="item-list"
								:class="{ 'border-bottom': Array.isArray(item.data) && item.data.length > 1 }"
								v-for="(task, taskIndex) in item.data" :key="taskIndex">
								{{ item.data.length > 1 ? taskIndex + 1 + '.' : '1. ' }} {{ task['labelText'] }}
							</view>
							<view class="margin-left" v-if="!item.data || item.data.length === 0">无</view>
						</view>
					</view>
				</view>
				<view class="padding-sm" @tap="showModal = false" style="text-align: center;font-size: 20px;">
					<button class="cu-btn bg-red" @tap="showModal = false">关闭</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const dayjs = require('dayjs');
	require('dayjs/locale/zh-cn');
	dayjs.locale('zh-cn');
	const weekday = require('dayjs/plugin/weekday');
	dayjs.extend(weekday);
	import gridItem from './grid-item/grid-item.vue';
	import {
		formatDate,
		getMonthDays,
		getQuarterStartMonth,
		getWeekStartDate,
		getWeekEndDate,
		getLastWeekStartDate,
		getLastWeekEndDate,
		getNextWeekStartDate,
		getNextWeekEndDate,
		getMonthStartDate,
		getMonthEndDate,
		getLastMonthStartDate,
		getLastMonthEndDate,
		getQuarterStartDate,
		getQuarterEndDate
	} from '@/common/date_utils.js';
	export default {
		components: {
			gridItem
		},
		data() {
			return {
				login_user_info: null,
				showCaledar: false,
				scheduleConfig: {},
				scheduleList: [], //
				colHeadList: [], // 列标签
				rowHeadList: [], //行标签
				rotate: false,
				rowLabelWidth: 70,
				scheduleItemList: [],
				showModal: false,
				modalList: [],
				itemData: {}
			};
		},
		computed: {
			timeStart() {
				if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
					let startDate = '';
					this.colHeadList.forEach((item, index) => {
						if (item[this.scheduleConfig.col_head_key_col] && index === 0) {
							startDate = item[this.scheduleConfig.col_head_key_col];
						}
					});
					return startDate;
				}
			},
			timeEnd() {
				if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
					let endDate = '';
					this.colHeadList.forEach((item, index) => {
						if (item[this.scheduleConfig.col_head_key_col] && index === this.colHeadList.length - 1) {
							endDate = item[this.scheduleConfig.col_head_key_col];
						}
					});
					return endDate;
				}
			},
			timeRange() {
				let startDate = '';
				let endDate = '';
				if (Array.isArray(this.colHeadList) && this.colHeadList.length > 0) {
					this.colHeadList.forEach((item, index) => {
						if (item[this.scheduleConfig.col_head_key_col] && index === 0) {
							startDate = item[this.scheduleConfig.col_head_key_col];
						}
						if (item[this.scheduleConfig.col_head_key_col] && index === this.colHeadList.length - 1) {
							endDate = item[this.scheduleConfig.col_head_key_col];
						}
					});
				}
				return {
					start: startDate,
					end: endDate
				};
			}
		},
		methods: {
			getTimeExplain(startDate, endDate) {
				const currentWeekStart = dayjs()
					.weekday(0)
					.format('YYYY-MM-DD');
				const prevWeekStart = dayjs()
					.weekday(-7)
					.format('YYYY-MM-DD');
				const nextWeekStart = dayjs()
					.weekday(7)
					.format('YYYY-MM-DD');
				switch (startDate) {
					case currentWeekStart:
						return '本周';
						break;
					case prevWeekStart:
						return '上周';
						break;
					case nextWeekStart:
						return '下周';
						break;
					default:
						return startDate + ' 至 ' + endDate;
						break;
				}
			},
			changeSchedule(operate) {
				if (this.scheduleConfig.col_head_disp_col === 'day_of_week_cn') {
					let cond = {};
					if (operate === 'prev') {
						//向前
						cond = {
							start: dayjs(this.timeStart)
								.weekday(-7)
								.format('YYYY-MM-DD'),
							end: dayjs(this.timeStart)
								.weekday(-1)
								.format('YYYY-MM-DD')
						};
					} else if (operate === 'next') {
						//向后
						cond = {
							start: dayjs(this.timeStart)
								.weekday(7)
								.format('YYYY-MM-DD'),
							end: dayjs(this.timeStart)
								.weekday(13)
								.format('YYYY-MM-DD')
						};
					}
					if (this.$route.query.no) {
						cond['no'] = this.$route.query.no;
					}
					this.getScheduleConfig(cond);
				}
			},
			goPage(e) {
				console.log(e);
				let cond = [];
				let scheduleConfig = {};
				if (e.data && e.data.length > 0) {
					scheduleConfig = e.data[0].scheduleConfig;
					cond = [{
							colName: scheduleConfig.table_col_head_col,
							ruleType: 'like',
							value: this.itemData['col'][scheduleConfig.tag][0][scheduleConfig.table_col_head_col]
						},
						{
							colName: scheduleConfig.table_row_head_col,
							ruleType: 'like',
							value: this.itemData['col'][scheduleConfig.tag][0][scheduleConfig.table_row_head_col]
						}
					];
				} else if (e.scheduleConfig) {
					scheduleConfig = e.scheduleConfig;
					cond = e.cond;
				}
				// let scheduleConfig = e.scheduleConfig;

				const viewTemp = {
					title: scheduleConfig.schedule_col,
					tip: scheduleConfig.table_row_head_col,
					// img: 'img',
					// price: 'current_price',
					footer: scheduleConfig.table_col_head_col
				};
				// return;
				if (scheduleConfig.page_type && scheduleConfig.page_type === 'proc') {
					uni.navigateTo({
						url: '/pages/public/list/list?cond=' +
							decodeURIComponent(JSON.stringify(cond)) +
							'&serviceName=' +
							scheduleConfig.srv +
							'&pageType=proc&viewTemp=' +
							decodeURIComponent(JSON.stringify(viewTemp)) +
							'&&destApp=oa'
					});
					// uni.navigateTo({
					//   url: scheduleConfig.dest_page + '?proc_instance_no=' + e.proc_instance_no
					// });
				} else {
					uni.navigateTo({
						url: '/pages/public/list/list?cond=' +
							decodeURIComponent(JSON.stringify(cond)) +
							'&serviceName=' +
							scheduleConfig.srv +
							'&pageType=list&viewTemp=' +
							decodeURIComponent(JSON.stringify(viewTemp))
					});
				}
			},
			clickRow(col, row, colIndex, rowIndex) {
				let arr = [];
				const self = this;
				if (col && typeof col === 'object' && Object.keys(col).length > 0) {
					Object.keys(col).forEach(item => {
						let columnData = col[item];
						if (col[item] && Array.isArray(col[item])) {
							col[item].forEach(column => {
								let config = column.scheduleConfig;
								let str = '';
								config.disp_info.forEach(disp => {
									if (typeof disp === 'string') {
										str += disp;
									} else if (typeof disp === 'object' && disp.srv_col_val) {
										// if(disp.max_char&&Number(disp.max_char).toString()!=='NaN'){
										//   let maxChar = Number(disp.max_char)
										//   if(column[disp.srv_col_val].length>=maxChar){
										//     str += column[disp.srv_col_val].slice(0,maxChar)+'...';
										//   }else{
										//     str += column[disp.srv_col_val];
										//   }
										// }else{
										str += column[disp.srv_col_val];
										// }
									}
								});
								column['labelText'] = str;
							});
						}
						arr.push({
							group: item,
							data: col[item]
						});
					});
					let colData = this.colHeadList[colIndex];
					this.scheduleItemList.forEach(item => {
						let group = arr.map(item => item.group);
						if (!group.includes(item.config.tag)) {
							let cond = [{
									colName: item.config.table_col_head_col,
									ruleType: 'like',
									value: colData[self.scheduleConfig.col_head_key_col]
								},
								{
									colName: item.config.table_row_head_col,
									ruleType: 'like',
									value: row[self.scheduleConfig.row_head_key_col]
								}
							];
							arr.push({
								group: item.config.tag,
								data: [],
								scheduleConfig: item.config,
								cond: cond
							});
						}
					});
					this.modalList = arr;
					this.itemData = {
						col,
						row,
						colIndex,
						rowIndex
					};
					this.showModal = true;
				} else {
					let colData = this.colHeadList[colIndex];
					let arr = [];
					this.scheduleItemList.forEach(item => {
						let cond = [{
								colName: item.config.table_col_head_col,
								ruleType: 'like',
								value: colData[self.scheduleConfig.col_head_key_col]
							},
							{
								colName: item.config.table_row_head_col,
								ruleType: 'like',
								value: row[self.scheduleConfig.row_head_key_col]
							}
						];
						arr.push({
							group: item.config.tag,
							data: [],
							scheduleConfig: item.config,
							cond: cond
						});
					});
					this.modalList = arr;
					this.showModal = true;
				}
				uni.setStorageSync('activeApp', this.scheduleConfig.app);
				const serviceName = this.scheduleConfig.table.replace('bx', 'srv') + '_select';
				const viewTemp = {
					title: this.scheduleConfig.schedule_col,
					tip: this.scheduleConfig.table_row_head_col,
					footer: this.scheduleConfig.table_col_head_col
				};
				return;
				let cond = [];
				if (col && Array.isArray(col) && col.length > 0) {
					console.log(e, 'clickRow');
					cond = [{
							colName: this.scheduleConfig.table_col_head_col,
							ruleType: 'like',
							value: e[0][this.scheduleConfig.table_col_head_col]
						},
						{
							colName: this.scheduleConfig.table_row_head_col,
							ruleType: 'like',
							value: e[0][this.scheduleConfig.table_row_head_col]
						}
					];
					uni.navigateTo({
						url: '/pages/public/list/list?cond=' +
							decodeURIComponent(JSON.stringify(cond)) +
							'&serviceName=' +
							serviceName +
							'&pageType=list&viewTemp=' +
							decodeURIComponent(JSON.stringify(viewTemp))
					});
				} else {
					const colValue = this.colHeadList[colIndex][this.scheduleConfig['col_head_key_col']];
					const rowValue = this.rowHeadList[rowIndex][this.scheduleConfig['row_head_key_col']];
					if (colValue && rowValue) {
						cond = [{
								colName: this.scheduleConfig.table_col_head_col,
								ruleType: 'like',
								value: colValue
							},
							{
								colName: this.scheduleConfig.table_row_head_col,
								ruleType: 'like',
								value: rowValue
							}
						];
						const serviceName = this.scheduleConfig.table.replace('bx', 'srv') + '_add';
						uni.navigateTo({
							url: '/pages/public/formPage/formPage?serviceName=' + serviceName + '&type=add&cond=' +
								decodeURIComponent(JSON.stringify(cond))
						});
					} else {
						uni.showToast({
							title: '数据异常,请刷新后再进行操作',
							icon: 'none'
						});
						return;
					}
				}
			},
			selectCol() {
				uni.showToast({
					icon: 'none',
					title: `${this.timeStart}~${this.timeEnd}`
				});
			},
			change({
				choiceDate,
				dayCount
			}) {
				console.log(choiceDate, dayCount);
			},
			changePopup(e) {},
			async getScheduleConfig(cond = {
				start: '',
				end: '',
				no: ''
			}) {
				// 获取排程配置数据
				const self = this;
				const url = this.getServiceUrl('daq', 'srvdaq_schedule_cfg_select', 'select');
				const req = {
					serviceName: 'srvdaq_schedule_cfg_select',
					colNames: ['*'],
					condition: [],
					order: []
				};
				if (cond && cond.no) {
					req.condition = [{
						colName: 'no',
						value: cond.no,
						ruleType: 'eq'
					}];
				}
				const res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS' && res.data.data.length > 0) {
					this.scheduleConfig = res.data.data[0];
					document.title = this.scheduleConfig.name;
					this.getScheduleItemList(cond).then(scheduleItemList => {
						this.getRowHead().then(rowHeadList => {
							rowHeadList.forEach((row, rowIndex) => {
								// rowHeadList.forEach(item => {
								row['rowDataList'] = [];
								row['newRowDataList'] = [];
								row['rowDataList'].length = 7;
								row['newRowDataList'].length = 7;
							});
							self.getColHead(cond).then(colHeadList => {
								colHeadList.forEach((col, colIndex) => {
									self.scheduleItemList.forEach(scheduleList => {
										scheduleList.data.forEach(schedule => {
											rowHeadList.forEach((row,
												rowIndex) => {
												if (
													col[self
														.scheduleConfig
														.col_head_key_col
														] ===
													schedule[
														scheduleList
														.config
														.table_col_head_col
														] &&
													row[self
														.scheduleConfig
														.row_head_key_col
														] ===
													schedule[
														scheduleList
														.config
														.table_row_head_col
														]
												) {
													let newObj =
														row[
															'newRowDataList']
														[
															colIndex] ?
														row[
															'newRowDataList']
														[
															colIndex] :
														{};
													if (row
														.user_no ===
														'zhangj'
														) {
														console
															.log(
																newObj,
																row,
																col,
																colIndex
																);
													}
													schedule
														.scheduleConfig =
														scheduleList
														.config;
													newObj[scheduleList
															.config
															.tag
															] &&
														Array
														.isArray(
															newObj[
																scheduleList
																.config
																.tag
																]
															) ?
														newObj[
															scheduleList
															.config
															.tag
															]
														.push(
															schedule
															) :
														(newObj[scheduleList
															.config
															.tag
															] = [
															schedule
														]);
													row['newRowDataList']
														[
															colIndex] =
														newObj;

													// row['rowDataListCol'] = row['rowDataListCol'] && row['rowDataListCol'].length > Object.keys(newObj).length ? row['rowDataListCol'] : Object.keys(newObj);
													row['rowDataListCol'] =
														row[
															'rowDataListCol'] ?
														row[
															'rowDataListCol']
														.concat(
															Object
															.keys(
																newObj
																)
															) :
														Object
														.keys(
															newObj
															);
													row['rowDataListCol'] =
														Array
														.from(
															new Set(
																row[
																	'rowDataListCol']
																)
															);
												}
												self.$set(self
													.rowHeadList,
													rowIndex,
													row);
											});
										});
									});
								});
							});
						});
					});
					return;
				}
			},
			async getScheduleItemList(cond = {
				start: '',
				end: '',
				no: ''
			}) {
				const scheduleConfig = this.deepClone(this.scheduleConfig);
				let schedule_item_cfg = scheduleConfig.schedule_item_cfg;
				if (schedule_item_cfg && typeof schedule_item_cfg === 'string') {
					schedule_item_cfg = JSON.parse(schedule_item_cfg);
				}
				let scheduleItemList = [];
				let weekStart = getWeekStartDate();
				let weekEnd = getWeekEndDate();
				if (schedule_item_cfg && Array.isArray(schedule_item_cfg)) {
					for (let i of schedule_item_cfg) {
						const url = this.getServiceUrl(i['app'], i['srv'], 'select');
						const req = (req = {
							serviceName: i['srv'],
							colNames: ['*'],
							condition: [{
								colName: i['table_col_head_col'],
								ruleType: 'between',
								value: [cond.start ? cond.start : weekStart, cond.end ? cond.end :
									weekEnd
								]
							}]
						});
						const res = await this.$http.post(url, req);
						if (res.data.state === 'SUCCESS') {
							scheduleItemList.push({
								config: i,
								data: res.data.data
							});
						}
					}
				}
				this.scheduleItemList = scheduleItemList;
				return scheduleItemList;
			},
			async getScheduleList(cond = {
				start: '',
				end: '',
				no: ''
			}) {
				const scheduleConfig = this.scheduleConfig;
				let serviceName = '';
				if (scheduleConfig.table) {
					serviceName = scheduleConfig.table.replace('bx', 'srv') + '_select';
					console.log('serviceName', serviceName);
					const url = this.getServiceUrl(scheduleConfig.app, serviceName, 'select');
					let weekStart = getWeekStartDate();
					let weekEnd = getWeekEndDate();
					const req = {
						serviceName: serviceName,
						colNames: ['*'],
						condition: [{
							colName: this.scheduleConfig.table_col_head_col,
							ruleType: 'between',
							value: [cond.start ? cond.start : weekStart, cond.end ? cond.end : weekEnd]
						}],
						order: []
					};
					const res = await this.$http.post(url, req);
					if (res.data.state === 'SUCCESS') {
						console.log('aaa', res.data.data);
						this.scheduleList = res.data.data;
						return res.data.data;
					}
				}
			},
			async getColHead(cond = {
				start: '',
				end: ''
			}) {
				const scheduleConfig = this.scheduleConfig;
				const url = this.getServiceUrl(scheduleConfig.col_head_app, scheduleConfig.col_head_service, 'select');
				let weekStart = getWeekStartDate();
				let weekEnd = getWeekEndDate();
				const req = {
					serviceName: scheduleConfig.col_head_service,
					colNames: ['*'],
					condition: [{
						colName: this.scheduleConfig.col_head_key_col,
						ruleType: 'between',
						value: [cond.start ? cond.start : weekStart, cond.end ? cond.end : weekEnd]
					}],
					order: []
				};

				const res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS') {
					let list = res.data.data.map(item => item[scheduleConfig.col_head_disp_col]);
					this.colHeadList = res.data.data;
					console.log('bbb', res.data.data, list);
					return res.data.data;
				}
			},
			async getRowHead(rowHead) {
				const scheduleConfig = this.scheduleConfig;
				const url = this.getServiceUrl(scheduleConfig.row_head_app, scheduleConfig.row_head_service, 'select');
				const req = {
					serviceName: scheduleConfig.row_head_service,
					colNames: ['*']
				};
				if (this.scheduleConfig.row_head_srv_cond) {
					let cond = this.scheduleConfig.row_head_srv_cond;
					if (typeof cond === 'string') {
						cond = JSON.parse(cond);
					}
					req.condition = cond;
					//   req.condition = JSON.parse(this.scheduleConfig.row_head_srv_cond);
				}
				const res = await this.$http.post(url, req);
				if (res.data.state === 'SUCCESS') {
					let list = res.data.data.map(item => item[scheduleConfig.col_head_disp_col]);
					list = [...new Set(list)];
					this.rowHeadList = res.data.data;
					return this.rowHeadList;
				}
			},
			clear(e) {
				// TODO nvue 取消冒泡
				e.stopPropagation();
			}
		},
		watch: {
			scheduleConfig: {
				deep: true,
				handler(newValue, oldValue) {
					if (newValue.schedule_item_cfg && typeof newValue.schedule_item_cfg === 'string') {
						this.scheduleConfig.schedule_item_cfg = JSON.parse(newValue.schedule_item_cfg);
					}
					if (newValue.row_head_srv_cond && typeof newValue.row_head_srv_cond === 'string') {
						this.scheduleConfig.row_head_srv_cond = JSON.parse(newValue.row_head_srv_cond);
					}
				}
			},
			rowHeadList: {
				deep: true,
				handler(newValue, oldValue) {}
			}
		},
		mounted() {
			if (uni.getStorageSync('login_user_info')) {
				this.login_user_info = uni.getStorageSync('login_user_info');
			}
		},
		onShow() {
			if (this.$route.query.no) {
				this.getScheduleConfig({
					no: this.$route.query.no
				});
			} else {
				this.getScheduleConfig();
			}
		},
	};
</script>

<style lang="scss">
	.rotate {
		transform: rotate(90deg);
	}

	.cu-dialog {
		width: 96%;
		height: auto;
		left: 2%;
		min-height: 500upx;
		background-color: #fff;

		// background-color: #e54d42;
		// color: #fff;
		.modal-list {
			display: flex;
			// justify-content: space-around;
			padding: 0 20upx 20upx;
			flex-direction: column;

			// background-color: #fff;
			.modal-title {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30upx;
				height: 60upx;

				.col-head {
					margin: 0 20upx;
				}
			}

			.page-item {
				padding: 20upx 0 10upx;

				// border-bottom: 1px solid #fff;
				.item-title {
					color: #333;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10upx;
					letter-spacing: 2upx;

					.left {
						display: flex;
						align-items: center;
						border-left: 3px solid #e54d42;
						text-indent: 20upx;
						font-weight: 600;
						color: #666;
					}

					.btn {
						margin-top: 5upx;
						padding: 10upx 10upx 10upx 20upx;
						letter-spacing: 10upx;
						border-radius: 10upx;
					}
				}

				.item-content {
					// background-color: #e54d42;
					padding-left: 40upx;
					font-size: 32upx;

					.item-list {
						padding-bottom: 10upx;
						line-height: 60upx;
					}

					.item-list.border-bottom {

						// border-bottom: 1px solid #fff;
						&:last-child {
							border: none;
						}
					}
				}
			}
		}
	}

	.course-wrap {
		width: 100%;
		max-width: 1000px;
		margin: 0 auto;
		min-height: 100vh;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.header {
			font-size: 32upx;
			line-height: 80upx;
			text-align: center;
			background-color: #0055FF;
			color: #fff;
			display: flex;
			justify-content: center;
			// position: fixed;
			top: 0;
			width: 100%;
			max-width: 1000px;
			.colhead-selector {
				min-width: 80%;
				display: flex;
				justify-content: space-around;

				.current-select {
					display: inline-block;
					margin: 0 10upx;
					min-width: 100upx;
					text-align: center;
				}
			}
		}

		.week {
			display: flex;
			background-color: #0055FF;
			color: #efefef;

			.week-item {
				min-width: 150upx;
				width: 150upx;
				flex: 1;
				height: 40upx;
				text-align: center;
				background-color: #0055FF;
			}
		}

		.course {
			display: flex;
			background-color: #fff;
			// overflow: scroll;
			// flex-direction: column;
			margin-bottom: 20upx;

			.time-area {
				display: flex;
				flex-direction: column;

				.week {
					margin: 0;
					padding: 0;
					height: 40upx;
					margin-bottom: 10upx;
				}

				.time-item {
					height: 200upx;
					margin-bottom: 2px;
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: center;

					.index {
						font-size: 30upx;
						line-height: 40upx;
					}

					.time {
						overflow: hidden;
						writing-mode: vertical-rl;
						display: flex;
						align-items: center;
						justify-content: space-between;
						letter-spacing: 5px;
					}
				}
			}

			.course-area {
				flex: 1;
				overflow: scroll;

				// padding-top: 25px;
				.week {
					margin-bottom: 10upx;
					// position: fixed;
					// top: 40px;
				}
			}

			.course-row {
				display: flex;
				width: 15 0%;
				flex: 1;

				.course-row-item {
					overflow-y: scroll;
					box-sizing: border-box;
					min-width: calc(150upx - 2px);
					font-size: 20upx;
					height: 200upx;
					margin-left: 2px;
					margin-bottom: 2px;
					padding: 5px;
					background-color: rgba($color: #e64340, $alpha: 0.5);
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					color: #fff;
					flex: 1;

					&:first-child {
						background-color: rgba($color: #e74c3c, $alpha: 0.8);
					}

					&:nth-child(2) {
						background-color: rgba($color: #1abc9c, $alpha: 0.8);
					}

					&:nth-child(3) {
						background-color: rgba($color: #2ecc71, $alpha: 0.8);
					}

					&:nth-child(4) {
						background-color: rgba($color: #3498db, $alpha: 0.8);
					}

					&:nth-child(5) {
						background-color: rgba($color: #f1c40f, $alpha: 0.8);
					}

					&:nth-child(6) {
						background-color: rgba($color: #00b294, $alpha: 0.8);
					}

					&.no-bg {
						background-color: rgba($color: #efefef, $alpha: 0.5);
						// border: 1px dashed #efefef;
						color: rgba($color: #333, $alpha: 0.5);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}
</style>
